/**
 * Created by YJH on 2018/5/24.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    TouchableOpacity,
    Image,
    Button,
} from 'react-native';

import GitHubTrending from 'GitHubTrending';
import NavigationBarComponent from '../NavigationBarComponent';
import DataRespository,{FLAG_STORAGE} from '../../expand/dao/DataRespository';

const URL = 'https://github.com/trending/';
export default class TrendingTestPage extends Component<Props> {

    constructor(props) {
        super(props);

        this.state = {
            inputTxt: 'java',
            txtFetch: '拉取数据中，请稍后..',
            url: URL,
        };

        this.gitHubTrending = new GitHubTrending();


    }

    _onFetch() {
        const url = this.state.url + this.state.inputTxt;
        this.toast.show("数据展示=" + url);
        this.gitHubTrending.fetchTrending(url)
            .then(result => {
                this.setState({
                    txtFetch: JSON.stringify(result),
                })
            })
            .catch(error => {
                this.setState({
                    txtFetch: JSON.stringify(error),
                })
            })
    }

    render() {
        return <View style={styles.container}>
            <NavigationBarComponent
                style={{backgroundColor: '#2196F3'}} title={'热搜'} statusBar={{backgroundColor: '#2196F3'}}/>


            <TextInput style={styles.edt} onChangeText={inputTxt => this.state.inputTxt = inputTxt}/>
            <TouchableOpacity style={styles.ViewForTextStyle}>
                <Text style={styles.newTextStyle} onPress={() => this._onFetch()}>加载数据</Text>

            </TouchableOpacity>

            <View >
                <Text style={styles.newTextStyle}>{this.state.txtFetch}</Text>
            </View>
        </View>
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FCFCFC',
    },
    newTextStyle: {
        fontSize: 24,
    },
    ViewForTextStyle: {
        height: 60,
        width: 180,
        borderColor: 'green',
        borderWidth: 1,
        borderRadius: 5,
        alignSelf: 'center',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ddd',
        margin: 5
    },

    edt: {
        marginTop: 50,
        height: 60,
        marginHorizontal: 15,
    },
});